<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>将页面平均分成四部分</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/alt/video-js-cdn.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.js"></script>
		<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>

		<style type="text/css">
			video{
				object-fit: initial;
			}
			
			* {
				margin: 0;
				padding: 0;
			}

			.main {
				width: 100%;
				height: 100%;
				position: absolute;
			}

			.quarter-div {
				width: 33.33%;
				height: 33.33%;
				float: left;
			}

			.blue {
				background-color: #5BC0DE;
			}

			.green {
				background-color: #5CB85C;
			}

			.orange {
				background-color: #F0AD4E;
			}

			.yellow {
				background-color: #FFC706;
			}
		</style>
	</head>
	<body>
		<div class="main">
				<video id=example-video1  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv1.m3u8" type="application/x-mpegURL">
				</video>
				
				<video id=example-video2  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv2.m3u8" type="application/x-mpegURL">
				</video>
				
				<video id=example-video3 class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv3.m3u8" type="application/x-mpegURL">
				</video>
			
				<video id=example-video4  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv4.m3u8" type="application/x-mpegURL">
				</video>
				
				<video id=example-video5  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv5.m3u8" type="application/x-mpegURL">
				</video>
				
				<video id=example-video6  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv6.m3u8" type="application/x-mpegURL">
				</video>
				
				<video id=example-video7  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv7.m3u8" type="application/x-mpegURL">
				</video>
				
				<video id=example-video8  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv8.m3u8" type="application/x-mpegURL">
				</video>
				
				<video id=example-video9  class="quarter-div video-js vjs-default-skin" controls>
					<source src="http://ivi.bupt.edu.cn/hls/cctv9.m3u8" type="application/x-mpegURL">
				</video>
			
		</div>
	</body>
	<script type="text/javascript">
		$(function (){
			var player1 = videojs('example-video1');
			player1.play();
			var player2 = videojs('example-video2');
			player2.play();
			var player3 = videojs('example-video3');
			player3.play();
			var player4 = videojs('example-video4');
			player4.play();
			
			var player5 = videojs('example-video5');
			player5.play();
			
			var player6 = videojs('example-video6');
			player6.play();
			
			var player7 = videojs('example-video7');
			player7.play();
			
			var player8 = videojs('example-video8');
			player8.play();
			
			var player9 = videojs('example-video9');
			player9.play();
		});
	</script>
</html>
